import React, { PureComponent } from 'react';

import { Form, Input, Button, Select, Icon, DatePicker } from 'antd';

import styles from './index.css';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1943299_pubiuz51khp.js', 
});

const Collapse = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1962383_fy41juoutxb.js',
});

const { Option } = Select;
const { RangePicker } = DatePicker;

/**
 * 讲师列表: 查询表单
 */
class Index extends PureComponent {
  constructor (props) {
    super (props)
  }

  render() {
    const { name, status } = this.props.state;
    const { getFieldDecorator } = this.props.form;

    return (
      <div className={styles.enquiry_form}>
        <Form
          onSubmit={this.formSubmittedHandler}>
          <table>
            <tbody>
              <tr>
                <th>名称: </th>
                <td>
                  <Form.Item>
                    {
                      getFieldDecorator('name', {
                        // 给表单字段一个初始值
                        initialValue: name,
                        // 禁止用户输入空格
                        getValueFromEvent: event => event.target.value.replace(/\s+/g, ''),
                      })
                        (
                          <Input type="text" placeholder='请输入名称' allowClear={true} />
                        )
                    }
                  </Form.Item>
                </td>
                <th>状态: </th>
                  <td>
                    <Form.Item>
                      {
                        getFieldDecorator('status', {
                          initialValue: status,
                        })(
                          <Select>
                            <Option value=''>全部</Option>
                            <Option value='ON'>正常</Option>
                            <Option value='OFF'>禁用</Option>
                          </Select>
                        )
                      }
                    </Form.Item>
                  </td>
                <td className={styles.enquiry_form_btn}>
                  <Form.Item>
                    <Button type="primary" htmlType="submit" className={styles.query}>
                      <IconFont type="icon-tubiao-" /> 查询
                    </Button>
                    <Button htmlType="button" onClick={this.formResetHandler} className={styles.reset}>
                      <IconFont type="icon-zhongzhi" /> 重置
                    </Button>
                  </Form.Item>
                </td>
              </tr>
            </tbody>
          </table>
        </Form>
      </div>
    )
  }


  /**
   * 查询表单成功回调事件
   */
  formSubmittedHandler = (event) => {
    // 关闭表单的默认提交行为
    event.preventDefault();

    // 获取表单域数据
    const fieldsValue = this.props.form.getFieldsValue();

    // 整理表单数据
    const inputJSON = {};

    // 状态
    const status = !!fieldsValue['status']? fieldsValue['status'] : '';
    Object.assign(inputJSON, { status })
    // 姓名
    const name = !!fieldsValue['name']? fieldsValue['name'] : '';
    Object.assign(inputJSON, { name })
    !!this.props.onSubmit && this.props.onSubmit(inputJSON);
  }

  /**
   * 表单重置点击事件
   */
  formResetHandler = () => {
    // 重置表单数据为初始值
    this.props.form.resetFields();
    // 通知只能组件更新状态
    !!this.props.onReset && this.props.onReset();
  }

}

export default Form.create({})(Index)
